<template>
  <div class="router-index">
    <div class="child-view" :class="{ 'child-view-full': !tabBarVisible }">
      <router-view :key="activeDate"></router-view>
    </div>
    <router-link :to="{ name: 'Home' }" class="go-home" v-if="!tabBarVisible"></router-link>
    <tab-bar v-if="tabBarVisible" id="tabBar"></tab-bar>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TabBar from "@/components/TabBar.vue";

@Component({
  name: "Index",
  components: {
    TabBar
  }
})
export default class Index extends Vue {
  get tabBarVisible() {
    let _return = false;
    _return = this.$route.meta && this.$route.meta.tabBar === true ? true : false;
    return _return;
  }

  get activeDate() {
    return this.$route.name !== undefined ? `${this.$route.name}${new Date()}` : `${this.$route}${new Date()}`;
  }
}
</script>

<style lang="less" scoped>
.router-index {
  .go-home {
    position: fixed;
    right: 3px;
    bottom: 63px;
    width: 74px;
    height: 74px;
    background: url("~@/assets/images/bg-6.png") center center no-repeat;
    background-size: contain;
  }
}
</style>
